
import { useNavigate } from 'react-router-dom';
import { DoubleLeftOutlined } from '@ant-design/icons';
import ExamItem from './components/ExamItem/ExamItem'
import { Button, ConfigProvider, message, Empty } from 'antd';
import Form from 'antd/es/form/Form';
import { getExamScoreAPI } from '@/apis/student';
import { useEffect, useState } from 'react';
import './StudentExamePage.scss';
import { useDispatch, useSelector } from 'react-redux';
import { fetchGetTestItem, fetchGetTestList } from '@/store/modules/student';


export default function StudentExamePage() {
    const [examList, setExamList] = useState([]);
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const { user_status } = useSelector(state => state.user);
    const { testItem } = useSelector(state => state.student);
    const [answerList, setAnswerList] = useState([]);
    const [isLoadScore, setIsLoadScore] = useState(false);

    const handleBackClick = function () {
        navigate('/studentcourse/test');
    }

    const colectAnswer = (key, data) => {
        setAnswerList(answerList.map((ele, index) => {
            if (index === key) return {
                ...ele,
                exercise_answer: data
            }

            return ele
        }));
    }

    // useEffect(()=>{
    //     console.log(answerList);
    // },[answerList])

    const getScore = async () => {
        setIsLoadScore(true);
        const res = await getExamScoreAPI(answerList, user_status.token);
        setIsLoadScore(false);
        message.success('提交成功，恭喜你获得了' + res.data.score + '分');
        await dispatch(fetchGetTestList(user_status.class_id, user_status.token));
        navigate('/studentcourse/test');
    }

    useEffect(() => {
        async function getExamList() {

            await dispatch(fetchGetTestItem({
                class_id: user_status.class_id,
                partid: user_status.partid
            }, user_status.token))
        }

        getExamList();

    }, []);


    useEffect(() => {
        setAnswerList(testItem.map((ele) => ({
            class_id: user_status.class_id,
            partid: user_status.partid,
            exercise_id: ele.exercise_id,
        })))
    }, [testItem])


    return (
        <div className='StudentExamePage'>
            <header>
                <button onClick={handleBackClick}> <DoubleLeftOutlined /> 返回</button>
                <h1>第{user_status.partid}章单元测试</h1>
            </header>
            <ConfigProvider
                theme={{
                    token: {
                        // Seed Token，影响范围大
                        colorPrimary: '#2486b9',
                        borderRadius: 5,

                        // 派生变量，影响范围小
                        // colorBgContainer: '#f6ffed',
                    },
                }}
            >
                <Form
                    className='exam-form'
                    layout='vertical'
                    onFinish={getScore}
                >
                    {
                        testItem.length === 0
                        || (testItem[0].success ?
                            <>
                                {testItem.map((ele, index) => <ExamItem key={index} info={ele} onChange={colectAnswer} />)}
                                <Form.Item
                                    wrapperCol={
                                        {
                                            offset: 9
                                        }
                                    }
                                >
                                    <Button
                                        className='submit-btn'
                                        type="primary"
                                        htmlType='submit'
                                        loading={isLoadScore}
                                    >
                                        提交
                                    </Button>
                                </Form.Item>
                            </>
                            : <Empty
                                className='empty'
                                image={Empty.PRESENTED_IMAGE_SIMPLE}
                                description={
                                    <span>
                                        {testItem[0].message}
                                    </span>
                                }
                            />
                        )
                    }

                </Form>
            </ConfigProvider>
        </div>
    )
}

